import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { message } from 'antd';

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

import '../styles/markdown.module.scss';
import '../styles/AudioWave.css';
import { useCopyToClipboard } from '@/hooks/event/use-copy-to-clipboard';

interface CodeBlockProps {
  language: string;
  code: string;
}

const CodeBlock: React.FC<CodeBlockProps> = ({ language, code }) => {
  const [messageApi, contextHolder] = message.useMessage();
  const { copyToClipboard } = useCopyToClipboard();

  const handleCopy = () => {
    copyToClipboard(code);
    messageApi.success('代码已复制到剪贴板');
  };

  return (
    <div className="hide-scrollbar relative rounded-md bg-[#171923] text-white">
      {contextHolder}
      <div
        className="flex items-center justify-between px-4 py-2"
        style={{ background: '#50505a' }}
      >
        <div className="">
          <span className="">{language}</span>
        </div>
        <CopyToClipboard text={code} onCopy={handleCopy}>
          <button className="ml-auto">复制</button>
        </CopyToClipboard>
      </div>

      <SyntaxHighlighter
        className="rounded-b-2xl"
        language={language}
        style={tomorrow}
        customStyle={{
          borderBottomLeftRadius: '10px',
          borderBottomRightRadius: '10px',
          background: '#171923',
          margin: '0px',
        }}
      >
        {code}
      </SyntaxHighlighter>
    </div>
  );
};

export default CodeBlock;
